<script lang="ts" setup>
import vheader from "./vheader.vue"
import content from "./content.vue"
import { useMessage, useDialog } from "naive-ui"
window.$message = useMessage()
window.$dialog = useDialog()
</script>

<template>
  <div class="home">
    <header>
      <vheader />
    </header>
    <main class="router-view">
      <content />
    </main>
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  position: relative;
  padding-top: 8vh;
  header {
    width: 100%;
    height: 8vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .router-view {
    width: 100%;
    height: 92vh;
    transition: all 0.3s var(--n-bezier);
    background-color: var(--bodyBg);
    box-sizing: border-box;
  }
}
</style>
